;(function() {
  var bttns = document.getElementById('press').getElementsByClassName("btn");
  var wrap = document.getElementById('wrap');
  var image = document.getElementById('slideshow');
  var index = 0;
  var timer = setInterval(autoPlay,2000);

  init();
  function init() {
    wrapHover();
    clickBttns();
  }

  function autoPlay() {
    var left = parseInt(image.style.left);
    if (left == -2800) {
      image.style.left = '0px';
    }
    else {
      image.style.left = -700 + left + 'px';
    }
    if (index == 4) {
      index = 0;
    }
    else {
      index ++;
    }
    activeBttns();
  }

  function wrapHover() {
    wrap.addEventListener('mouseenter', function() {
      clearInterval(timer);
    });

    wrap.addEventListener('mouseleave', function() {
      timer = setInterval(autoPlay,2000);
    });
  }

  function activeBttns() {
    for (var i=0;i<bttns.length;i++) {
      bttns[i].classList.remove('active');
    }
    bttns[index].classList.add('active');
  }

  function clickBttns() {
    for (let i=0;i<bttns.length;i++) {
      bttns[i].onclick = function() {
        var distance = i - index;
        console.log(distance);
        bttns[index].classList.remove('active');
        bttns[i].classList.add('active');
        image.style.left = parseInt(image.style.left) + distance*(-700) + 'px';
        index = i;
      }
    }
  }
})();
